{% extends "base.html" %}
{% import "page.html" as page %}
{% block content %}
    <div id="service_list" class="content-wrapper list">
        <section class="content-header">
            <h1>
                服务管理
                <small>
                    默认每页显示25条数据
                </small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="{{ url_for('index.index') }}"><i class="fa fa-dashboard"></i> Home</a></li>
                <li><a href="{{ url_for('assets.assets_service') }}"> 服务管理 </a></li>
                <li class="active"> 服务管理</li>
            </ol>
        </section>
        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            服务列表
                            {% if current_user.role.name == 'Admin' or current_user.role.name == 'Ops' %}
                                <button type="button" class="btn btn-primary btn-sm" style="float:right;margin-top:-5px"
                                        data-target=".add-service-modal" data-toggle="modal">添加服务
                                </button>
                            {% endif %}
                            <div class="modal fade add-service-modal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel">服务信息</h4>
                                        </div>
                                        <div class="modal-body">
                                            <form class="form-horizontal">
                                                <div class="form-group">
                                                    <label for="inputServiceName"
                                                           class="col-sm-2 control-label">服务名称</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control" id="inputServiceName"
                                                               placeholder="名称" v-model="new_service_name">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label" for="inputDptName">选择部门</label>
                                                    <div class="col-sm-10">
                                                        <select class="form-control col-sm-10" id="inputDptName" v-model="dpt_id">
                                                            <option selected="selected" value="">请选择部门</option>
                                                            <option v-for="line in dpt_list" value="${line.id}"
                                                                    v-text="line.name"></option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </form>
                                            <div style="color:red;text-align:center" v-if="errMsg"
                                                 v-text="errMsg"></div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                            </button>
                                            <button type="button" class="btn btn-primary" @click="add_service()">提交
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover" id="serviceTbl">
                                    <thead>
                                    <tr>
                                        <th>服务名称</th>
                                        <th>所属部门</th>
                                        {% if current_user.role.name == 'Admin' or current_user.role.name == 'Ops' %}
                                            <th>操作</th>
                                        {% endif %}
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for service in services %}
                                        <tr>
                                            <td>{{ service.name }}</td>
                                            <td>{{ service.department.name }}</td>
                                            {% if current_user.role.name == 'Admin' or current_user.role.name == 'Ops' %}
                                                <td><span class="label label-success"
                                                          style="margin-right:10px;cursor:pointer" data-toggle="modal"
                                                          @click="modify_service_id='{{ service.id }}',modify_service_name='{{ service.name }}',modify_dpt_id='{{ service.department.id }}'"
                                                          data-target=".modify-service-modal">修改
                                                    </span>
                                                    <span
                                                        class="label label-danger"
                                                        style="margin-right:10px;cursor:pointer"
                                                        @click="show_delete_service_modal('{{ service.id }}')">删除
                                                    </span>
                                                </td>
                                            {% endif %}
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            {% if pagination %}
                                <div class="pagination" style="float:right">
                                    {{ page.pagination_widget(pagination,"assets.assets_service") }}
                                </div>
                            {% endif %}
                            <div class="modal fade delete-service-modal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel4" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel4">删除服务</h4>
                                        </div>
                                        <div class="modal-body">
                                            <form class="form-horizontal">
                                                <div class="form-group">
                                                    <label style="text-align: center" class="col-sm-5 control-label">确认是否删除该服务?</label>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                            </button>
                                            <button type="button" class="btn btn-primary" @click="delete_service()">删除
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal fade modify-service-modal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel2" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel2">修改服务信息</h4>
                                        </div>
                                        <div class="modal-body">
                                            <form class="form-horizontal">
                                                <div class="form-group">
                                                    <label for="modifyServiceName"
                                                           class="col-sm-4 control-label">服务名称</label>
                                                    <div class="col-sm-8">
                                                        <input type="text" class="form-control" id="modifyServiceName"
                                                               placeholder="名称" v-model="modify_service_name">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-4 control-label"
                                                           for="inputModifyDpt">选择部门<small>(不支持修改)</small></label>

                                                    <div class="col-sm-8">
                                                        <select class="form-control col-sm-10" id="inputModifyDpt"
                                                                v-model="modify_dpt_id">
                                                            <!-- <option v-for="line in dpt_list" value="${line.id}"
                                                                    v-text="line.name"
                                                                    v-if="line.id != modify_dpt_id"></option>
                                                            -->
                                                            <option v-for="line in dpt_list" value="${line.id}"
                                                                    v-text="line.name" v-if="line.id == modify_dpt_id"
                                                                    selected></option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </form>
                                            <div style="color:red;text-align:center" v-if="errMsg"
                                                 v-text="errMsg"></div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                            </button>
                                            <button type="button" class="btn btn-primary" @click="modify_service()">修改
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
{% endblock %}
{% block bottom_js %}
    <script>
        window.onload = function () {
            if (({{ menu|tojson }}) in {'host_list': '', 'service_list': '', 'host_detail': ''}) {
                $('#asset_manage').addClass('active').addClass('menu-open');
            } else {
                $('#asset_manage').removeClass('active').removeClass('menu-open');
            }

            load_department_list();

            $('#serviceTbl').tablesorter({
                widgets: ['zebra'],
                usNumberFormat: false,
                sortReset: true,
                sortRestart: true,
                headers: {
                    1: {sorter: false},
                    2: {sorter: false}
                }
            });
        };
        data = {
            search: '',
            new_service_name: '',
            modify_service_id: '',
            modify_service_name: '',
            dpt_id: '',
            dpt_list: [],
            modify_dpt_id: '',
            errMsg: '',
            errMsg2: '',
        };

        function check_search() {
            if ($.trim(data.search).length === 0) {
                return false;
            }
        }

        new Vue({
            el: '.list',
            data: data,
            methods: {
                add_service: function () {
                    let service_name = this.new_service_name;
                    let dpt_id = this.dpt_id;
                    add_service(service_name, dpt_id);
                },
                show_delete_service_modal: function (service_id) {
                    this.service_id = service_id;
                    $('.delete-service-modal').modal('show');
                },
                delete_service: function () {
                    delete_service(this.service_id);
                },
                modify_service: function () {
                    let service_id = this.modify_service_id;
                    let service_name = this.modify_service_name;
                    let dpt_id = this.modify_dpt_id;
                    modify_service(service_id, service_name, dpt_id);
                },
            }
        });

        function add_service(service_name, dpt_id) {
            if ($.trim(service_name).length === 0) {
                data.errMsg = '服务名称不能为空！';
                return false;
            }
            if ($.trim(dpt_id).length === 0) {
                data.errMsg = '请选择部门！';
                return false;
            }

            $.ajax({
                url: "{{url_for('api_assets.api_assets_service')}}",
                data: {
                    'service_name': $.trim(service_name),
                    'dpt_id': $.trim(dpt_id),
                },
                timeout: 10000,
                type: 'post',
                success: function (response) {
                    console.log(response);
                    if (response.result === 1) {
                        swal({
                            type: 'success',
                            title: '添加成功',
                            showConfirmButton: true,
                        }).then(function () {
                            window.location.reload();
                        });
                        $('.add-service-modal').modal('hide');
                    } else {
                        swal({
                            type: 'error',
                            title: '添加失败',
                            showConfirmButton: true,
                            text: response.errMsg
                        })
                    }
                }
            })
        }

        function delete_service(service_id) {
            $.ajax({
                url: "{{url_for('api_assets.api_assets_service')}}",
                data: {'del_id': service_id},
                timeout: 10000,
                type: 'delete',
                success: function (response) {
                    if (response.resCode === 1) {
                        swal({
                            type: 'success',
                            title: '删除成功',
                            showConfirmButton: false,
                            timer: 1500
                        }).then(function () {
                            window.location.reload();
                        });
                        $('.delete-service-modal').modal('hide');
                    } else {
                        swal({
                            type: 'error',
                            title: '删除失败',
                            showConfirmButton: false,
                            timer: 1500
                        })
                    }
                },
                error: function (xhr) {
                    swal({
                        type: 'error',
                        text: xhr.responseText,
                        showConfirmButton: true,
                    })
                }
            })
        }

        function modify_service(service_id, service_name, dpt_id) {
            if ($.trim(service_name).length === 0) {
                data.errMsg = '服务名称不能为空！';
                return;
            }

            $.ajax({
                url: "{{url_for('api_assets.api_assets_service')}}",
                data: {
                    'modify_id': service_id,
                    'modify_name': service_name,
                },
                timeout: 10000,
                type: 'put',
                success: function (response) {
                    if (response.resCode === 1) {
                        swal({
                            type: 'success',
                            title: '修改成功',
                            showConfirmButton: false,
                            timer: 1500
                        }).then(function () {
                            window.location.reload();
                        });
                        $('.modify-service-modal').modal('hide');
                    } else {
                        swal({
                            type: 'error',
                            title: '修改失败',
                            showConfirmButton: true,
                            text: response.errMsg
                        })
                    }
                },
                error: function (response) {
                    $.notify({
                            title: "<strong>部门修改错误:</strong><br>",
                            message: response.responseText
                        },
                        {
                            type: 'danger',
                            delay: 3600000
                        });
                }
            })
        }

        function load_department_list() {
            /* dpt_list存储department list */
            $.ajax({
                url: "{{url_for('api_assets.api_assets_department_list')}}",
                timeout: 10000,
                type: 'post',
                success: function (response) {
                    data.dpt_list = response;
                }
            })
        }
    </script>
{% endblock %}